<template>
	<view class="swiper-fastentry-container">
		<swiper class="swiper-fastentry" :style="{height: height}" @change="onfastEntrySwiperChange">
			<swiper-item v-for="(pageItem, pageIndex) in fastentryItems" :key="pageIndex" class="swiper-fastentry-page">
				<view class="fastentry-flex-container">
					<view v-for="(item, index) in pageItem" :key="index" class="flex-item" :style="{width:(100/colNum)+'%'}">
						<view class="fastentry-link" @click="goToPage(item, index)">
							<i :style="{backgroundImage: 'url(' + item.entryImageUrl + ')'}"></i>
							<text>{{item.entryName}}</text> 
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<view class="swiper-indicator-dots" v-if="length > 1">
			<view v-for="(item, index) in fastentryItems" :key="index" class="dot" :class="current == index ? 'active' : ''"></view>
		</view>
	</view>
</template>

<script>
export default{
	props:{
		initializationParams: {
			type: String,
			default: ''
		},
		fragmentId: {
			type: Number,
			default: 0
		},
		//来源模块在页面的排序序号
		moduleOrder: {
			type: [Number,String],
			default: 0
		}
	},
	data() {
		return {
			height: 0,    // 高度
			current: 0,
			length: 0,    // 页数
			total: 0,     // 快速入口个数
			colNum:5,//每行个数
			fastentryItems: []
		}
	},
	watch: {
		fragmentId: {
			immediate: true,
			handler(newVal, oldVal) {
				if (!newVal) return
				let fastentryItems = JSON.parse(this.initializationParams);
				this.fastentryItems = []
				this.colNum = fastentryItems[0].iconNumType || 5;
				//SDK包 去除会员模块
				var index = 0;
				while (index < fastentryItems.length){
					if(this.$globalData.state.isSDK && fastentryItems[index].entryName.indexOf('会员专区')>-1){
						fastentryItems.splice(index, 1)
					}else{
						index ++; 
					}
				}
				this.total = fastentryItems.length;
				this.length = Math.ceil(this.total / (2*this.colNum));
				for (let j = 0; j < this.length; j++) {
					this.fastentryItems.push(fastentryItems.slice(0 + j * (2*this.colNum), (2*this.colNum) * (j + 1)))
				}
				if(this.total > this.colNum){
					this.height = uni.upx2px(396) + 'px';
				}else{
					this.height = uni.upx2px(202) + 'px';
				}
			}
		}
	},
	methods:{
		onfastEntrySwiperChange(e) {
			this.current = e.detail.current;
		},
		goToPage(item, i) {
			// 取数： 资源位点击
			this.$stat('click', {
				Column_ID: 'M' + this.fragmentId,
				Key_Type: 'filter',
				Key_Word: item.entryName,
				Position_ID: i + 1
			})
			var statInfo = {'Ref_Module_Type':item.linkType,'Ref_Module_ID':'1002','Ref_Module_Order':this.moduleOrder,'Ref_Module_Inner_Order':i+1}
			if (item.linkType == '105' && item.entryName == '会员中心') {
				this.$Login.login({
					wxObj: $event,
					noRefresh: true,
					success: () => {
						this.$utils.handleLink(item.linkType, item.linkValue,item,{statInfo:statInfo},this.fragmentId)
					}
				})
			} else if (item.linkType == '404') {
				this.$emit('upDataView')
				this.$utils.toast('活动还没开始，请耐心等待哦~')
			} else {
				this.$utils.handleLink(item.linkType, item.linkValue,item,{statInfo:statInfo},this.fragmentId)
			}
		}
	}
}
</script>

<style lang="scss" scoped>
	.swiper-fastentry-container{
		width: 100%;
		background-color: #ffffff;
		// margin-bottom: 16upx;
		position: relative;
		.swiper-fastentry{
			width: 100%;
			.swiper-fastentry-page{
				.fastentry-flex-container{
					padding-top: 12upx;
					padding-bottom: 28upx;
					display: -webkit-box;
					display: -webkit-flex;
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					justify-content: flex-start;
					.flex-item{
						margin: 10px 0;
						width: 20%;
						text-align: center;
						.fastentry-link{
							i{
								width: 80upx;
								height: 80upx;
								display: block;
								// background-color: #F4F4F4;
								// border-radius: 100%;
								background-size: contain;
								background-repeat: no-repeat;
								margin: 0 auto 16upx auto;
								// margin-bottom: 16upx;
							}
							text{
								font-size:24upx;
								font-weight:400;
								color:rgba(102,102,102,1);
								line-height:34upx;								
								text-align: center;
							}
						}
						
					}
				}	
			}			
		}
		.swiper-indicator-dots{
			width: auto;
			position: absolute;
			bottom: 16upx;
			height: 16upx;
			left: 50%;
			transform: translateX(-50%);
			.dot{
				width: 16upx;
				height: 16upx;
				border-radius: 16upx;
				background-color: #EAEAEA;
				float: left;
				margin: 0 5upx;
			}
			.dot.active{
				background-color: #FF004F;
			}
		}
	}
</style>
